<template>
    <div class="newArticleBox flex justify-center align-center">
        <div class="newArticleCoreBox grid">
            <vs-row>
                <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="8">
                    <div v-for="(a, ai) in articles.data" :key="a.id" class="item ani padding-x">
                        <nuxt-link :to="`/newsdetail?id=${a.id}`">
                            <div class="title padding-bottom-xs b">
                                <span class="i">{{ ai + 1 }}</span>
                                <span>{{ a.dynamic_title }}</span>
                            </div>
                            <div class="des">{{ a.dynamic_description }}</div>
                        </nuxt-link>
                    </div>
                </vs-col>
                <vs-col vs-type="flex" vs-justify="center" vs-align="center" w="4">
                    50%
                </vs-col>
            </vs-row>
        </div>
    </div>
</template>
<script>
export default ({
    props: {
        articles: {
            type: Object,
            value: {}
        }
    },
    mounted() {

    },
})
</script>
<style lang="scss" scoped>
.newArticleBox {
    width: 100%;
    padding: 130px 0 50px 0;

    .newArticleCoreBox {
        width: 1200px;
        height: 100%;

        .item {
            &:hover {
                background: #f7f7f7;
                border-radius: 15px;
            }
        }

        .title {
            font-size: 18px;
            color: black;

            .i {
                display: inline-block;
                width: 30px;
                padding: 3px 5px;
                background: blue;
                color: white;
                border-radius: 10px;
                font-size: 14px;
                margin-right: 10px;
                text-align: center;
            }
        }

        .des {
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: #7e7e7e;
            padding-left: 45px;
        }
    }
}

@media screen and (min-width:0px) and (max-width:1280px) {
    .newArticleBox {
        width: 100%;
        padding: 10rem 0 2rem 0;

        .newArticleCoreBox {
            width: 100%;
            height: 100%;
        }
    }
}
</style>